<template>
  <div class="ActivityEra">
    <el-checkbox-group v-model="check" @change="changeType" class="ActivityEra-item">
      <el-checkbox
        v-for="item in ActivityEraData"
        :key="item.value"
        class="ActivityEra-item-checkbox"
        :label="item.value"
        >{{ item.label }}</el-checkbox
      >
    </el-checkbox-group>
    <!-- <el-radio-group class="ActivityEra-item" @change="changeType" v-model="radio">
      <el-radio v-for="item in ActivityEraData" :key="item.value" class="ActivityEra-item-radio" :label="item.value">{{ item.label }}</el-radio>
    </el-radio-group> -->
    <el-divider border-style="dashed"></el-divider>
    <el-row class="ActivityEra-total" justify="space-around">
      <div class="ActivityEra-total-img"></div>
      <div>
        <span>全国断层总数</span>
        <p class="ActivityEra-total-num">{{ total }}</p>
      </div>
    </el-row>
  </div>
</template>
<script setup>
import { getFaultTotal } from '@/api/activeFault';
const emit = defineEmits(['checkType']);

const ActivityEraData = ref([
  { label: '全新世断层', value: '0' },
  { label: '晚更新世断层', value: '1' },
  { label: '早中更新世断层', value: '2' },
  { label: '前第四纪断层', value: '3' },
]);
const check = ref(['0', '1', '2', '3']);
const changeType = (val) => {
  let data = [];
  if (val.length > 0) {
    val.forEach((item) => {
      data.push(ActivityEraData.value.find((v) => v.value === item)['label']);
    });
  }
  emit('checkType', data);
};
const total = ref(0);
const faultTotal = () => {
  getFaultTotal().then((res) => {
    total.value = res.data?.faultTotal;
  });
};
onMounted(() => {
  faultTotal();
});
</script>
<style scoped lang="scss">
.ActivityEra {
  width: 400px;
  margin: 10px auto 0;

  &-item {
    margin-left: 10px;

    &-checkbox {
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      margin-bottom: 5px;
      color: #ffffff;
      width: 50%;
      margin-right: 0;

      :deep(.el-checkbox__input.is-focus .el-checkbox__inner) {
        border-color: #46ffff;
      }

      :deep(.el-checkbox__label) {
        font-size: 18px;
      }

      &.el-checkbox.is-checked {
        :deep(.el-checkbox__label) {
          color: #46ffff;
        }

        :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
          background-color: #46ffff;
          border-color: #46ffff;
        }

        :deep(.el-checkbox__inner::after) {
          border: 2px solid #000c58d9;
          border-left: 0;
          border-top: 0;
        }
      }
    }
  }

  .el-divider {
    border-color: #475adb;
    margin: 10px 0;
  }

  &-total {
    width: 350px;
    padding: 10px;
    border: 1px solid #475adb;
    margin: 0 auto;
    color: #fff;
    font-size: 18px;

    &-img {
      width: 85px;
      background-size: 100% 100%;
      background-image: url('@/assets/images/activeFault/era.png');
    }

    &-num {
      text-align: center;

      & > span {
        margin-right: 10px;
      }

      font-family: DS-Digital;
      color: #46ffff;
      letter-spacing: 10px;
      margin: 10px 0;
      font-size: 30px;
    }
  }
}
</style>
